<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度换肤案例</title>
    <style>
        body {
            background-image: url(../images/1.jpg) no-repeat center;
        }
        
        li {
            display: inline;
        }
        
        ul {
            margin: 200px auto;
            background: #999;
            width: 600px;
            height: 100px;
            line-height: 100px;
            padding: 5px 10px;
        }
        
        ul li {
            width: 100px;
            padding: 6px 8px;
            display: inline-block;
        }
        
        li img {
            width: 100px;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        /* ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        } */
        /* body {
            background: url(../images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 200px auto;
            background-color: #fff;
            width: 410px;
            
            padding: 3px 0 0 0;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
            height: 80px; 
        } */
    </style>
</head>

<body>
    <ul class="daidu">
        <li><img src="../images/1.jpg" alt=""></li>
        <li><img src="../images/2.jpg" alt=""></li>
        <li><img src="../images/3.jpg" alt=""></li>
        <li><img src="../images/4.jpg" alt=""></li>
        <li><img src="../images/5.jpg" alt=""></li>

    </ul>


    <script>
        // 案例分析
        // 1.这个案例练习的是给一组元素注册事件
        // 2.给4个小图片利用循环注册点击事件
        // 3.当我们点击这个图片,让我们背景图改为当前图片
        // 4.核心: 把当前图片的 src 路径取过来,给 body 做为背景即可
        // 1.获取元素
        var imgs = document.querySelector('ul').querySelectorAll('img');
        // console.log(imgs);\
        // 2.循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // 1.this.src 就是点击图片的路径
                // console.log(this.src);
                // 2. 把这个路径 this.scr 给 body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';

            }
        }
    </script>
</body>

</html>